<template>
    <!-- 页面标题区 -->
    <a-row  class="page-content-header">
      <span class="title">{{routeName}}&emsp;&nbsp;<plus-outlined @click="showPlusModal"/></span>
    </a-row>
    <a-row style="font-size: 16px;font-weight: bold;">
      <a-col :span="3.3"><span>&emsp;&emsp;&emsp;&emsp;组织名称:</span></a-col>
      <a-col :span="5" ><a-input placeholder="组织名称" size="middle" style="margin-left: 5px;width: 250px;"/></a-col>
      <a-col :span="2">&emsp;&nbsp;<a-button type="primary">查询</a-button></a-col>
      <a-col :span="2"><a-button>重 置</a-button></a-col>
    </a-row>

    <a-row style="padding-left: 55px;margin-top: 20px;">
      <!-- 表格 -->
    <a-table :columns="columns" :data-source="data" :scroll="{ x: 1180 }">
      <!-- 主体部分 -->
      <template #bodyCell="{ column, record }" style="color: black;">
        <template v-if="column.key === 'organizationName'">
          <a style="color: black;">{{ record.organizationName }}</a>
        </template>
        <template v-else-if="column.key === 'type'">
          <span>
            <a-tag color="processing" v-if="record.type==='公司'">{{ record.type }}</a-tag>
            <a-tag color="warning" v-else-if="record.type==='工厂'">{{ record.type }}</a-tag>
            <a-tag color="error" v-else>{{ record.type }}</a-tag>
          </span>
        </template>
        <template v-else-if="column.key === 'action'">
          <span>
            <a>新增</a>
            <a-divider type="vertical" />
            <a>编辑</a>
            <a-divider type="vertical" />
            <a style="color: red;">删除</a>
          </span>
        </template>
      </template>

    </a-table>
    </a-row>



    <a-modal width="700px" v-model:visible="plusVisible" centered="true" title="新增" @ok="handlePlusOk">
    <template #footer>
      <a-button key="plusback" @click="handlePlusCancel">关闭</a-button>
      <a-button key="plussubmit" type="primary" :loading="plusLoading" @click="handlePlusOk">确定</a-button>
    </template>

    <a-form :model="formState" name="function_add">
      <a-row style="margin-bottom: 30px;margin-top: 30px;">
        <a-col :span="6"  style="text-align: right;font-weight: bold;font-size: 16px;">公司名称:&nbsp;&nbsp;</a-col>
      <a-col :span="12">
        <a-input  placeholder="请输公司名称" size="middle"></a-input>
      </a-col>
      </a-row>
      <a-row style="margin-bottom: 30px;">
        <a-col :span="6"  style="text-align: right;font-weight: bold;font-size: 16px;">公司地址:&nbsp;&nbsp;</a-col>
        <a-col :span="12"  style="font-weight: bold;font-size: 16px;">
          <a-input  placeholder="请输入公司地址" size="middle"></a-input>
        </a-col>
      </a-row>
      <a-row style="margin-bottom: 30px;">
        <a-col :span="6"  style="text-align: right;font-weight: bold;font-size: 16px;">最大门店数:&nbsp;&nbsp;</a-col>
        <a-col :span="12"  style="font-weight: bold;font-size: 16px;">
          <a-input  placeholder="请输入最大门店数" size="middle"></a-input>
        </a-col>
      </a-row>
      <a-row style="margin-bottom: 30px;">
        <a-col :span="6"  style="text-align: right;font-weight: bold;font-size: 16px;">ERP数据源:&nbsp;&nbsp;</a-col>
          <a-col :span="18"  style="font-weight: bold;font-size: 16px;">
            <a-radio-group v-model:value="value1" :options="EPRdataSource" />
          </a-col>
      </a-row>
      <a-row style="margin-bottom: 30px;">
        <a-col :span="6"  style="text-align: right;font-weight: bold;font-size: 16px;">行业类型:&nbsp;&nbsp;</a-col>
          <a-col :span="18"  style="font-weight: bold;font-size: 16px;">
            <a-radio-group v-model:value="value1" :options="industryType" />
          </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script setup>
import { computed,ref } from 'vue';
import { useRoute } from 'vue-router';
import { PlusOutlined } from "@ant-design/icons-vue";
const plusLoading = ref (false);
const plusVisible = ref(false);

const EPRdataSource= ['是', '否']
const industryType = ['商超', '医药','自定义']
const route = useRoute(); // 使用 Vue Router 的钩子函数 useRoute 获取当前路由对象
// 计算属性，获取当前路由的元数据中的标题
const routeName = computed(() => route.meta.title);

const showPlusModal = () => {
      plusVisible.value = true;
    };
    const handlePlusOk = () => {
      plusLoading.value = true;
      setTimeout(() => {
        plusLoading.value = false;
        plusVisible.value = false;
      }, 2000);
    };
    const handlePlusCancel = () => {
      plusVisible.value = false;
    };

const columns = [
  {title: '组织名称',dataIndex: 'organizationName',key: 'organizationName',width: '50%'},
  {title: '类型',dataIndex: 'type',key: 'type',width: '15%'},
  {title: '操作',dataIndex: 'action',key: 'action',width: '35%'}];

const data = [
  {key: '1',organizationName: 'ABX',type: '公司',children: [
    { key: 11, organizationName: '七华', type: '个体', },
    { key: 12, organizationName: '中汇', type: '公司', },
  ]},
  {key: '2',organizationName: '上海有声',type: '公司',children: [
    { key: 21, organizationName: '中科深信', type: '工厂', },
    { key: 22, organizationName: '中科英泰', type: '工厂', },
  ]},
  {key: '3',organizationName: '乐禾',type: '公司',},
];
</script>

<style lang="less" scoped>

.container {
  display: flex;
  height: 100%;
  padding-top: 120px;
  flex-direction: column;
  align-items: center;
  .login-bg {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.5;
    width: 100%;
    height: 100%;
  }
  .console-card{
  height: 40vh;
  width: 40%;
  margin-top: -3%;
  border: 3px solid #969696;
  box-shadow: 0 0 10px rgba(40, 40, 40, 0.5);
  }

}
.page-content-header{
  padding: 42px 24px 16px 60px;
}
.title {
      display: block;
      float: left;
      margin-bottom: 0;
      padding-right: 12px;
      color: rgba(0, 0, 0, 0.85);
      font-weight: 600;
      font-size: 24px;
      line-height: 32px;
    }
</style>
